<template>
  <div>
    <el-form
      v-if="formObj && formObj.length > 0"
      ref="ruleForm"
      :model="formData"
      class="demo-ruleForm"
      :label-position="labelPosition"
      :validate-on-rule-change="false"
      :label-width="labelwidth"
      size="small"
      :inline="inline"
      autocomplete="off"
    >
      <e-desc
        margin="0 12px"
        :class="{ border: !border }"
        :label-width="labelwidth"
      >
        <!-- 进行遍历json -->
        <el-col
          v-for="formobj in formObj"
          v-show="
            typeof formobj.notShow === 'function'
              ? formobj.notShow(formobj, formData)
              : !formobj.notShow
          "
          :key="formobj.prop"
          :span="formobj.width"
          :class="{
            'desc-item': border,
            'desc-border': istext(formobj.label),
          }"
        >
          <!-- 标题 -->
          <div v-if="formobj.title" class="title clearfix">
            <span></span> {{ formobj.text }}
          </div>
          <!--  -->
        </el-col>
      </e-desc>
    </el-form>
  </div>
</template>

<script>
import eDesc from "./e-desc.vue";
export default {
  name: "PublicForm",
  components: {
    eDesc,
  },
  props: {
    // 是否一行
    inline: {
      type: Boolean,
      required: false,
      default() {
        return true;
      },
    },
    // 是否有边框
    border: {
      type: Boolean,
      required: false,
      default() {
        return true;
      },
    },
    // 标签位置
    labelPosition: {
      type: String,
      required: false,
      default() {
        return "right";
      },
    },
    // 表单类型
    type: {
      type: String,
      required: false,
      default() {
        return "edit";
      },
    },
    // lable宽度
    labelwidth: {
      type: String,
      required: false,
      default() {
        return "120px";
      },
    },
    // 表单对象
    formObj: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },
    // 表单数据
    formData: {
      type: Object,
      required: true,
    },
    // 不知道
    searchSelectOptionsCb: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    istext() {
      return (label, arr1) => {
        const arr = arr1 || ["录入人", "录入时间"];
        if (label) {
          if (arr.indexOf(label) !== -1) {
            return true;
          }
        }
        return false;
      };
    },
  },
  methods: {
    // 表单赋值
    formAssignment(data) {
      return new Promise((resolve, reject) => {
        Object.keys(this.formData).forEach((key1) => {
          if (data[key1]) {
            if (this.type === "select") {
              if (data[key1 + "name"]) {
                this.formData[key1] = data[key1 + "name"];
              } else {
                this.formData[key1] = data[key1];
              }
            } else {
              this.formData[key1] = data[key1];
            }
          }
        });
        Object.keys(this.formObj).forEach((key1) => {
          const _a = this.formObj[key1];
          const listType = _a.listType;
          const key = _a.prop;
          // 附件渲染
          if (listType && listType === "filelist") {
            this.$utils.selectFile(this.formData[key]).then((res) => {
              _a.uploadObj.fileList = res;
            });
          }
        });
        resolve("ok");
      });
    },
    // 渲染表单中的字典
    selectDic() {
      if (this.type !== "select") {
        // 遍历当前配置数组
        const arr = [];
        // Promise.all(promise);
        for (const i in this.formObj) {
          // 定义当前对象值
          const obj = this.formObj[i];
          // 判断是否有字典值
          if (obj.optionsdic) {
            // 判断当前组件是否已经请求过字典值 && this.dicarr[obj.optionsdic].length>0
            if (!this.dicarr[obj.optionsdic]) {
              // push一下 生成添加一下字典属性
              arr.push(obj.optionsdic);
            }
          }
        }
        // 去重
        const newArr = [...new Set(arr)];
        // 生成promise 数组
        const promiseArr = [];
        newArr.forEach((t) => {
          promiseArr.push(
            this.$api.utils.sysDictionary({
              dictCode: t,
            })
          );
        });
        // 字典赋值
        Promise.all(promiseArr).then((val) => {
          newArr.forEach((t, i) => {
            // 给this添加字典值
            if (!this.dicarr[t]) {
              this.$set(this.dicarr, t, val[i]);
            }
            this.formObj.forEach((obj1) => {
              if (obj1.optionsdic === t) {
                if (!obj1.options) {
                  // 添加options属性
                  this.$set(obj1, "options", val[i]);
                } else {
                  obj1.options = val[i];
                }
              }
            });
          });
        });
      }
    },
    /* 清空表单
				逻辑：
				1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
				2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
			 */
    resetForm() {
      this.$refs.ruleForm.resetFields();
      // this.$nextTick(() => {
      // 置空propname对应的字段 和 文件列表
      for (const key in this.formObj) {
        if (this.formObj[key].propname) {
          this.formData[this.formObj[key].propname] = undefined;
        }
        if (this.formObj[key].upload) {
          // this.$refs[this.formObj[key].prop].clearFiles();
          this.formObj[key].uploadObj.hideUpload = false;
          this.formObj[key].uploadObj.fileList = [];
        }
      }
      // })
    },
  },
};
</script>

<style lang="scss"></style>
